/*
 * The theme 'simple'
 */
@color-fore: #333;
@color-back: #fff;
@color-pale: mix(#fff, @color-primary, 90%);
@color-inverse: contrast(@color-primary, #333, #fff, 60%);
@color-inverse-dark: darken(@color-primary, 60%);
@color-primary-text: contrast(@color-primary, @color-inverse-dark, @color-primary, 60%);
@color-link: darken(@color-primary-text, 10%);

// Mixins
.background-image(@image; @imageRepeat; @imagePositionX; @imagePositionY) when not(@image = inherit)
{
    background-image: @image;
    background-repeat: @imageRepeat;
    background-position: @imagePositionX @imagePositionY;
}
.caret(@color)
{
    border-top-color: @color;
    border-bottom-color: @color;
}

.panel(@color)
{
    .panel,
    .article,
    .list
    {
        background-color: #fff;
        border-radius: 0;
        box-shadow: none;
        border: none;
    }

    .panel > .panel-heading
    {
        background: none;
        border-bottom: none;
        position: relative;

        &:before 
        {
            display: block;
            content: ' ';
            position: absolute;
            background: @color-pale;
            width: 4px;
            left: -2px;
            top: 5px;
            bottom: 5px;
        }
    }

    .panel-heading > h4 {margin: 0; line-height: 20px}

    .nav-primary,
    .nav-stacked.nav-primary,
    .nav-secondary
    {
        background-color: #fff;

        > li:first-child > a,
        > li:last-child > a,
        > li:first-child.nav-heading
        {
            border-radius:0;
        }

        > li.nav-heading
        {
            background-color: #f5f5f5;
        }

        > li > a
        {
        }

        > li > a:hover
        {
            color: @color;
        }

        > li.active > a,
        > li.active > a:hover,
        > li.active > a:active,
        > li.active > a:focus
        {
            color: @color-inverse;
            background-color: @color;
            border-color: @color;
        }
    }

    .list 
    {
        padding: 20px 0;
        
        > header
        {
            background: none;
            padding: 10px 10px 20px 10px;
        }
    }

    .article
    {
        > header
        {
            padding-left: 0;
            padding-right: 0;

            > .dl-inline, > .abstract
            {
                margin: 0;
            }

            > .dl-inline {padding: 10px 0}
        }

        > .article-content {padding: 0!important;}

        > footer {border-top: none;}
        > footer, > footer > p {padding-left: 0; padding-right: 0;}
    }

    #commentBox
    {
        .panel
        {
            background: #f1f1f1;

            &.mgb-0 {background: none; margin-bottom: 10px;}

            .panel-heading:before {display: none}
        }
    }

    #boards, .page-content > .panel
    {
        .panel-heading:before {display: none;}

        .panel-heading { padding: 10px 0;}

        .panel-actions {margin-right: 0;}
    }

    .panel.thread
    {
        border-width: 1px;
        border-style: solid;
        box-shadow: none;

        .panel-heading {padding: 10px; background-image: none}
    }

    .panel-form.panel
    {
        background: #f1f1f1;

        > .panel-heading
        {
            padding: 15px 20px 0 20px;

            &:before {display: none;}
        }
    }
}

.navbarLayout(@layout; @radius; @backcolor) when (@layout = true)
{
    @media (min-width: 768px)
    {
        #navbar .navbar-nav {width: 100%}
        .navbar-nav > li:first-child > a {border-radius: @radius 0 0 @radius}

        #navbar .navbar-collapse {padding: 0;}
        #navbar .navbar-nav > li {float: none; display: table-cell; width: 1%}
        #navbar .navbar-nav > li > a {text-align: center; white-space:nowrap; box-shadow: inset 1px 0 0 lighten(@backcolor, 10%), inset -1px 0 0 darken(@backcolor, 10%);}

        #navbar .navbar-nav > li:first-child > a {border-radius: @radius 0 0 @radius; box-shadow: inset -1px 0 0 darken(@backcolor, 10%);}
        #navbar .navbar-nav > li:last-child > a {border-radius: 0 @radius @radius 0; box-shadow: inset 1px 0 0 lighten(@backcolor, 10%);}
    }
}
.navbarLayout(@layout; @radius) when (@layout = false)
{
    @radiusX: @radius + 3px;
    @media (min-width: 768px)
    {
        .navbar-nav > li:first-child > a {border-radius: @radius 0 0 @radius}
        .navbar-nav.navbar-right > li:last-child > a {border-radius: 0 @radius @radius 0}
    }
}

.columnLayout(@inverse) when (@inverse)
{
    .col-main {float: right;}
    .col-side {float: left;}
}

.footerLayout(@borderStyle; @backColor) when not(@borderStyle = none), not(@backColor = transparent)
{
    #footer {padding: 20px 15px;}
    #footNav {left: 15px;}
    #powerby {right: 15px;}
}

.button(@color;)
{
    @textColor: @color-inverse;
    @border: darken(@color, 2%);

    color: @textColor;
    border-color: @border;
    background-color: @color;
    border-radius: 1px;
    text-shadow: none;

    &:hover
    {
        background-color: darken(@color, 6%);
        border-color: darken(@border, 6% + 4%);
        color: @textColor;
    }
    &:focus,
    &:active,
    &.active,
    .open .dropdown-toggle&
    {
        color: @textColor;
        background-color: lighten(@color, 10%);
        border-color: lighten(@border, 10% - 4%);
    }
    &.disabled,
    &[disabled],
    fieldset[disabled] &
    {
        &,
        &:hover,
        &:focus,
        &:active,
        &.active
        {
          background-color: @color;
              border-color: @border;
        }
    }
}

.clearfix()
{
  &:before,
  &:after
  {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

.make-container(@slector)
{
    @{slector}
    {
        display: block;
        padding: 0 15px; margin: 0 auto; position: relative;
        .clearfix();
    }
    @media (min-width: 768px) {@{slector} {max-width: 750px;}}
    @media (min-width: 992px) {@{slector} {max-width: 970px;}}
    @media (min-width: 1200px) {@{slector} {max-width: 1170px;}}
    @media (max-width: 767px) {@{slector} {padding: 0 10px;}}
}

.set-grid-gap(@gap)
{
    @half-gap: @gap/2;
    .row {margin-left: -@half-gap; margin-right: -@half-gap;}
    .row > [class*='col-'], .row > .col {padding-left: @half-gap; padding-right: @half-gap;}
    .row > .col > .panel, 
    .row > .col .carousel, 
    .row > [class*='col-'] > .panel, 
    .row > [class*='col-'] > .carousel, 
    .page-content > .panel, 
    #boards > .panel, 
    .page-side > .panel, 
    .row > [class*='col-'] > .nav, 
    .row > [class*='col-'] > .list-group, 
    .m-blog .card, 
    .row > .col > .list-group 
    {margin-bottom: @gap;}
}

.panel(@color-primary);

.btn {.button(@color-primary);}
.btn-group .btn {border-radius: 1px!important; color: @color-link;}
.btn-group .btn:hover {color: #fff}
.btn-group .btn.active {color: @color-primary; background-color: @color-pale}

.set-grid-gap(40px);

/* Global style */
body
{
    .background(@background-color, @background-image, @background-image-repeat, @background-image-position-x, @background-image-position-y);
}

/* Links */
a
{
  color: @color-link;

  &.primary, &.text-primary 
  {
    color: @color-primary-text;
  }

  &:hover,
  &:focus 
  {
    color: lighten(@color-primary-text, 5%);
  }
}

/* Containers. */
.make-container(~"#header .wrapper");
.make-container(~".page-wrapper");
.make-container(~"#navbar");
.make-container(~"#searchbar > form");
.make-container(~"#footer > .wrapper");
.make-container(~"#blogNav > .wrapper");

/* Header */
#header {padding: 0;}
#headNav
{
    position: static;
    text-align: right;
    background: #333;
    color: #ddd;
    padding: 2px;

    a
    {
        color: #f1f1f1;
        &:hover, &:active, &:visited {color: #fff;}
    }

    nav
    {
        > span, > a
        {
            margin-right: 10px
        }
    }

    .text-danger {color: #f1a325}
}
#headTitle {display: block; padding: 20px 0;}
#siteSlogan {display: none}

/* Search bar */
#searchbar {display: block; position: static; width: auto; max-width: initial}
#searchbar .input-group {position: absolute; right: 0; top: -70px; max-width: 150px;}
#searchbar .form-control {border-radius: 0; border: 1px solid transparent; box-shadow: none; padding-left: 8px; background: none; height: 43px; color: #808080; text-indent: -99em; transition: border .2s, text-indent .2s}
#searchbar .form-control:hover, #searchbar .form-control:focus {border-color: @color-primary; text-indent: 0;}
#searchbar .form-control:hover {color: #333}
#searchbar .btn {padding: 8px; top: 4px; right: 4px;}
#searchbar .btn:hover, #searchbar .btn:focus {color: @color-primary}

/* Navbar */
.navbar
{
    background: none;
    border-radius: 0; 
    font-weight: bold;
    min-height: initial
}
.navbar-collapse 
{
    position: absolute;
    top: -70px;
    left: 240px;
}

.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus,
.navbar-brand:hover,
.navbar-brand:focus
{
    color: @color-primary;
    background-color: @color-pale;
}

.nav .caret {border-top-color: #666}
.nav a:hover,
.nav > li.open > a,
.nav > li.open > a:hover,
.nav > li.open > a:focus
.nav > li > a:hover,
.nav > li > a:focus {
    .caret {
        border-top-color: @color-primary;
        border-bottom-color: @color-primary;
    }
}

.navbar-nav > li.active > a,
.navbar-nav > li.active > a:hover,
.navbar-nav > li.active > a:focus,
.navbar-nav > li.active > a:visited
{
    color: @color-primary;
    z-index: 10;
}

@media (max-width: 767px)
{
    body > .page-container {margin-top: 0;}
    #header {margin-left: -10px; margin-right: -10px;}
    #headTitle {padding: 0; top: 28px; left: 10px;}
    #searchbar {bottom: auto; top: 3px;}
    #searchbar .form-control {padding-top: 2px; padding-bottom: 2px; border: none; background-color: #fafafa; height: 24px;}
    #searchbar .btn {top: 0; padding: 3px;}
    #searchbar .form-control:hover {background-color: #fff}

    .navbar {margin-left: -10px; margin-right: -10px;}
    .navbar-collapse {position: static;}
}

/* Form control */
.form-control
{
    border-radius: 1px;
    box-shadow: none;
    &:focus, &:active
    {
        border-color: @color-primary;
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@color-primary, 10%);
    }
}

/* Dropdown */
.dropdown-menu {border-radius: 1px}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {background-color: @color-primary;}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {background-color: @color-pale; color: @color-primary;}

/* Carousel */
.carousel-control.left, .carousel-control.right {background-image: none}

/* Table */
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {background-color: @color-pale}

/* Special parts */
#footer {border-color: #f1f1f1}
#rightDockerBtn {border-radius: 1px}
#go2top {border-radius: 0; background-color: #fff; font-size: 18px;}
#footNav a:hover, #powerby a:hover {color: @color-primary}
#powerby a:hover, #powerby:hover .icon-chanzhi > i, #powerby:hover .icon-chanzhi > i:before, #powerby:hover .icon-chanzhi > i:after {border-color: @color-primary;}
#powerby, #footNav {top: 0;}
#footNav {left: 10px;}
#powerby {right: 10px;}


/* Popover */
.popover {border-radius: 0}

/* Card */
.card {box-shadow: none; border-radius: 1px; border-bottom-width: 2px}

/* Blog */
.m-blog #searchbar {bottom: auto}
.m-blog #searchbar .form-control {background-color: #f5f5f5}
.m-blog #headTitle {margin-top: 0;}
#blogNav {border-left: none; border-right: none; border-top: none}
.m-blog #pager {margin-bottom: 20px;}
@media (max-width: 767px)
{
    #headNav.hide {display: none;}
    #blogNav {margin-left: 0; margin-right: 0;}
    #blogNav .navbar-nav {float: left;}
    #blogNav .navbar-nav.navbar-right {float: right;}
    #blogNav .navbar-nav > li {width: auto;}
    #blogNav .navbar-nav > li > a {border-radius: 0}
}
